<template>
  <div class="list-container">
    <el-divider>常量管理</el-divider>
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit('add')"
        >
          添加
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form
          ref="form"
          :model="queryBean"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-select
              v-model="queryBean.type"
              placeholder="请选择类型"
              @change="handleQuery"
            >
              <el-option label="房间户型" value="1"></el-option>
              <el-option label="户型标签" value="2"></el-option>
              <el-option label="招募令技能" value="3"></el-option>
              <el-option label="地产标签" value="4"></el-option>
              <el-option label="愿望池需求" value="5"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="handleQuery"
            >
              切换
            </el-button>
          </el-form-item> -->
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
    >
      <el-table-column
        v-if="queryBean.type == 1 || queryBean.type == '房间户型'"
        show-overflow-tooltip
        label="名称"
        prop="typeName"
      ></el-table-column>
      <el-table-column
        v-if="queryBean.type == 2 || queryBean.type == 4"
        show-overflow-tooltip
        label="名称"
        prop="constantValue"
      ></el-table-column>
      <el-table-column
        v-if="queryBean.type == 3 || queryBean.type == 5"
        show-overflow-tooltip
        label="名称"
        prop="skillName"
      ></el-table-column>

      <el-table-column
        v-if="queryBean.type != 1 && queryBean.type != '房间户型'"
        show-overflow-tooltip
        label="编辑"
      >
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(row)"
          ></el-button>
          <!-- <el-button
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(row)"
          ></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="700px"
      @close="close"
    >
      <el-form ref="Form" label-width="120px">
        <el-form-item label="名称">
          <el-input
            v-model.trim="value"
            placeholder="请输入名称"
            size="medium"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button v-if="!isEdit" type="primary" @click="add">添 加</el-button>
        <el-button v-if="isEdit" type="primary" @click="edit">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getByType,
    addConstant,
    getHouseType,
    addHouseType,
    modConstant,
  } from '@/api/tag'
  import { addSkill, getAllSkill } from '@/api/skill'
  export default {
    name: 'Tag',
    components: {},
    data() {
      return {
        title: '',
        dialogFormVisible: false,
        list: [],
        listLoading: true,
        elementLoadingText: '正在加载...',
        queryBean: { type: '房间户型' },
        skillType: '',
        value: '',
        constantType: '',
        isEdit: false,
        row: {},
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchHouseTypeData()
    },
    methods: {
      close() {
        this.value = ''
        this.dialogFormVisible = false
      },
      edit() {
        if (this.value == '') {
          this.$baseNotify('名称未填写！', '失败', 'error', 'top-right')
          return
        }
        let item = {}
        let para = this.row
        switch (this.queryBean.type) {
          case '1':
            // temp.typeId = this.row.typeId
            break
          case '2':
            item.constantId = para.constantId
            this.modConstantData(item)
            break
          case '3':
            item.skillId = para.skillId
            this.modSkillData(item)
            break
          case '4':
            item.constantId = para.constantId
            this.modConstantData(item)
            break
          case '5':
            item.skillId = para.skillId
            this.modSkillData(item)
            break
          default:
            // this.addHouseTypeData(item)
            break
        }
      },
      add() {
        if (this.value == '') {
          this.$baseNotify('名称未填写！', '失败', 'error', 'top-right')
          return
        }
        switch (this.queryBean.type) {
          case '1':
            this.addHouseTypeData()
            break
          case '2':
            this.addConstantData()
            break
          case '3':
            this.addSkillData()
            break
          case '4':
            this.addConstantData()
            break
          case '5':
            this.addSkillData()
            break
          default:
            this.addHouseTypeData()
            break
        }
      },
      handleEdit(row) {
        if (row != 'add') {
          this.isEdit = true
          this.row = row
          switch (this.queryBean.type) {
            case '1':
              this.value = row.typeName
              break
            case '2':
              this.constantType = 2
              this.value = row.constantValue
              break
            case '3':
              this.skillType = 2
              this.value = row.skillName
              break
            case '4':
              this.constantType = 4
              this.value = row.constantValue
              break
            case '5':
              this.skillType = 1
              this.value = row.skillName
              break
            default:
              this.value = row.typeName
              break
          }
          this.title = '编辑'
          this.dialogFormVisible = true
        } else {
          this.isEdit = false
          this.title = '新建'
          this.dialogFormVisible = true
        }
      },
      handleDelete(row) {
        // if (row.infoId) {
        //   this.$baseConfirm('你确定要删除当前项吗', null, async () => {
        //     const { data } = await deleteNew({ infoId: row.infoId })
        //     if (data.status == 0) {
        //       this.$baseMessage('删除成功！', 'success')
        //     } else {
        //       this.$baseMessage(data.message, 'error')
        //     }
        //     this.fetchConstantData()
        //   })
        // }
      },
      handleQuery() {
        console.log(this.queryBean.type)
        switch (this.queryBean.type) {
          case '1':
            this.fetchHouseTypeData()
            break
          case '2':
            this.constantType = 2
            this.fetchConstantData()
            break
          case '3':
            this.skillType = 2
            this.fetchSkillData()
            break
          case '4':
            this.constantType = 4
            this.fetchConstantData()
            break
          case '5':
            this.skillType = 1
            this.fetchSkillData()
            break
          default:
            this.fetchHouseTypeData()
            break
        }
      },
      async addConstantData(para) {
        let item = {}
        item.constantType = this.constantType
        item.constantValue = this.value
        const { data } = await addConstant(item)
        if (data.status == 0) {
          this.dialogFormVisible = false
          this.$baseNotify('创建成功', '成功', 'success', 'top-right')
          this.fetchConstantData()
        }
      },
      async modConstantData(para) {
        let item = {}
        item.constantType = this.constantType
        item.constantId = para.constantId
        item.constantValue = this.value
        const { data } = await modConstant(item)
        if (data.status == 0) {
          this.dialogFormVisible = false
          this.$baseNotify('更新成功', '成功', 'success', 'top-right')
          this.fetchConstantData()
        }
      },
      async fetchConstantData() {
        let pushData = {}
        pushData.type = this.constantType
        this.listLoading = true
        const { data } = await getByType(pushData)
        if (data.status == 0) {
          this.list = data.body
          this.$baseNotify('数据获取完毕！', '成功', 'success', 'top-right')
          setTimeout(() => {
            this.listLoading = false
          }, 500)
        } else {
          this.$baseNotify(data.message, '失败', 'error', 'top-right')
        }
      },
      async addSkillData() {
        let item = {}
        item.skillName = this.value
        item.type = this.skillType
        const { data } = await addSkill(item)
        if (data.status == 0) {
          this.dialogFormVisible = false
          this.$baseNotify('创建成功', '成功', 'success', 'top-right')
          this.fetchSkillData()
        }
      },
      async modSkillData(para) {
        let item = {}
        item.skillName = this.value
        item.type = this.skillType
        item.skillId = para.skillId
        const { data } = await addSkill(item)
        if (data.status == 0) {
          this.dialogFormVisible = false
          this.$baseNotify('更新成功', '成功', 'success', 'top-right')
          this.fetchSkillData()
        }
      },
      async fetchSkillData() {
        this.listLoading = true
        const { data } = await getAllSkill(this.skillType)
        if (data.status == 0) {
          this.list = data.body
          this.$baseNotify('数据获取完毕！', '成功', 'success', 'top-right')
          setTimeout(() => {
            this.listLoading = false
          }, 500)
        } else {
          this.$baseNotify(data.message, '失败', 'error', 'top-right')
        }
      },
      //户型
      async fetchHouseTypeData() {
        this.listLoading = true
        const { data } = await getHouseType()
        if (data.status == 0) {
          this.list = data.body
          this.$baseNotify('数据获取完毕！', '成功', 'success', 'top-right')
          setTimeout(() => {
            this.listLoading = false
          }, 500)
        } else {
          this.$baseNotify(data.message, '失败', 'error', 'top-right')
        }
      },
      async addHouseTypeData() {
        let item = {}
        item.typeName = this.value
        const { data } = await addHouseType(item)
        if (data.status == 0) {
          this.dialogFormVisible = false
          this.fetchHouseTypeData()
          this.$baseNotify('创建成功！', '成功', 'success', 'top-right')
        } else {
          this.$baseNotify(data.message, '失败', 'error', 'top-right')
        }
      },
    },
  }
</script>
